<template>
  <div>
    <el-dialog title="工程计算"
               :before-close="beforeClose"
               :visible.sync="visible"
               :close-on-click-modal="false"
               @opened="opened"
               class="datav-dialog"
               width="65%">
      <el-card class="box-card mb">
        <div slot="header" class="clearfix">
          <span class="title2">城市采用地源热泵供暖制冷节能、减碳计算</span>
        </div>

        <div class="cardBody">
          <el-card class="box-card mb">
            <!-- 表单 -->
            <div class="cardBody">
              <div class="flexR ai">
                <span>总面积（万㎡）：</span>
                <div  class="mr">
                  <el-input size="mini" v-model.number="area"></el-input>
                </div>
                <span>单位面积耗煤（kg/㎡）：</span>
                <div>
                  <el-input size="mini" v-model.number="CoalConsumptionUnit"></el-input>
                </div>
              </div>
            </div>
          </el-card>
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span class="title2">冬季取暖</span>
            </div>
            <div class="cardBody">
              <div class="flexColumn ai ">
              <div class="flexR ai mb">
                <span>折算单位准煤矿（kg/㎡）：</span>
                <div class="mr">
                  <el-input size="mini" :disabled="false" v-model="ConversionStandardCoalMine"></el-input>
                </div>
                <span>总耗标准媒（万吨）：</span>
                <div  class="mr">
                  <el-input size="mini" v-model="TotalStandardCoalConsumption"></el-input>
                </div>
              </div>
                <div class="flexR ai mb">
                  <span>采用地热泵总耗标准媒（万吨）：</span>
                  <div  class="mr">
                    <el-input size="mini" v-model="subterraneanHeatTotalStandardCoalConsumption"></el-input>
                  </div>
                  <span>采用地热泵总节约标准煤（万吨）：</span>
                  <div >
                    <el-input size="mini" :disabled="false" v-model="TotalEnergySaving"></el-input>
                  </div>
                </div>
              </div>

            </div>
          </el-card>
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span class="title2">夏季制冷</span>
            </div>
            <div class="cardBody">

              <div class="flexR ai mb">
                <span>普通空调总耗标准煤（万吨）：</span>
                <div  class="mr">
                  <el-input size="mini" v-model="TotalCoolingCoalConsumption"></el-input>
                </div>
                <span>采用地热泵总耗标准煤（万吨）：</span>
                <div >
                  <el-input size="mini" v-model="TotalCoolingGeothermalCoalConsumption"></el-input>
                </div>
              </div>
              <div class="flexR ai mb">
                <span>总节约标准煤（万吨）：</span>
                <div >
                  <el-input size="mini"  v-model="CoolTotalEnergySaving"></el-input>
                </div>
              </div>
            </div>
          </el-card>


          <el-card class="box-card mb">

              <div class="flexR ai jc mb">
                <span>冬夏季总计节能（标准煤/万吨）：</span>
                <div  class="mr">
                  <el-input size="mini" v-model="SaveCoalInWinterAndSummer"></el-input>
                </div>
                <span>冬夏季总计减少二氧化碳排放（万吨）：</span>
                <div >
                  <el-input size="mini" v-model="CarbonDioxideEmissionsInWinterAndSummer"></el-input>
                </div>
              </div>


          </el-card>

        </div>

      </el-card>
    </el-dialog>
  </div>
</template>

<script>
const Geothermal= 20.1;//地热单位耗电（kwh）
export default {

  data() {

    return {
      activeName: "first",
      area:0,//总面积
      CoalConsumptionUnit:0,//单位耗煤
      // ConversionStandardCoalMine:this.CoalConsumptionUnit*0.9,//折算标准煤
      // TotalStandardCoalConsumption:this.ConversionStandardCoalMine*this.area,//总耗标准煤
      // subterraneanHeatTotalStandardCoalConsumption:Geothermal*this.area*3.5,//地热总耗标准煤
      // TotalEnergySaving:this.subterraneanHeatTotalStandardCoalConsumption-this.TotalStandardCoalConsumption,//地热总节约标准煤
    }
  },
  computed:{
    ConversionStandardCoalMine(){
      return this.CoalConsumptionUnit*0.9
    },
    TotalStandardCoalConsumption(){
      return this.ConversionStandardCoalMine*0.001*this.area
    },
    subterraneanHeatTotalStandardCoalConsumption(){
      return Geothermal*this.area*3.5/10000
    },
    TotalEnergySaving(){
      return this.TotalStandardCoalConsumption-this.subterraneanHeatTotalStandardCoalConsumption
    },
    TotalCoolingCoalConsumption(){
      return 16.7*this.area*3.5/10000

    },
    TotalCoolingGeothermalCoalConsumption(){
      return 8.3*this.area*3.5/10000
    },
    CoolTotalEnergySaving(){
      return this.TotalCoolingCoalConsumption-this.TotalCoolingGeothermalCoalConsumption
    },
    SaveCoalInWinterAndSummer(){
      return this.TotalEnergySaving+this.CoolTotalEnergySaving
    },
    CarbonDioxideEmissionsInWinterAndSummer(){
      return this.SaveCoalInWinterAndSummer*2.67
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  created() {

  },
  methods: {
    opened() {

    },
    yearChange() {
      this.month = this.year + '-01';
    },
    handleClose(key, keyPath) {

    },
    updateActiveName(data) {
      this.activeName = data
    },

    beforeClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    }
  }
}
</script>

<style>
@import "../../assets/styles/datav-dialog.scss";


</style>

<style scoped>
.datav-dialog{
 top:10vh;
}

.jc{
  justify-content: center;
}
.ai{
  align-items: center;
}

.flexR{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.flexRow {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.flexColumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex1 ,.flex2{
  width: 40%;
}


.inputItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 5px 5px 0px;

}

.inputBottom > * {
  flex-basis: 80px;
}

.inputTop {
  margin-bottom: 5px;
}
.title2{
  margin: 10px 0;
}

.inputBottom {
  width: auto;
  max-width: 100px;
}

.bottomButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.mb{
  margin-bottom: 20px;
}
.mr{
  margin-right: 20px;
}
.box-card{

}
.bottomButton > button {
  margin-right: 20px;
}


</style>

